import React, { useEffect, useState } from 'react';
import GlobalTimeFilter from './GlobalTimeFilter';
import SatisfactionStats from './SatisfactionStats';
import HotQA from './HotQA';
import StaffRanking from './StaffRanking';
import BusinessCategoryStats from './BusinessCategoryStats';
import IncidentAreaStats from './IncidentAreaStats';
import WorkOrderStatus from './WorkOrderStatus';
import HighFrequencyWords from './HighFrequencyWords';
import ConsultationTotal from './ConsultationTotal';
import ConsultationTotalMap from './ConsultationTotalMap';
import '../assets/style.css';

const Dashboard = () => {
  const [timePeriod, setTimePeriod] = useState({ period: 'day', param: '' });

  useEffect(() => {
    // resizeScreen 函数：负责页面缩放适配
    function resizeScreen() {
      const designWidth = 3840; // 设计稿宽
      const designHeight = 2160; // 设计稿高

      const scaleX = window.innerWidth / designWidth;
      const scaleY = window.innerHeight / designHeight;

      const content = document.querySelector('.content');
      // 宽高独立缩放，保证铺满全屏
      if (content) {
        content.style.transform = `scale(${scaleX}, ${scaleY})`;
        content.style.transformOrigin = 'top left';
        content.style.position = 'absolute';
        content.style.left = '0';
        content.style.top = '0';
      }
    }

    // 防抖函数，避免 resize 事件频繁调用
    function debounce(func, wait) {
      let timeout;
      return function () {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
      };
    }

    // 更新星期显示
    function updateWeek() {
      const now = new Date();
      const weekDays = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六',
      ];
      const weekElement = document.getElementById('week');
      if (weekElement) {
        weekElement.textContent = weekDays[now.getDay()];
      }
    }

    // 更新时间和日期显示
    function updateDateTime() {
      const now = new Date();

      // 更新时间
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      const seconds = now.getSeconds().toString().padStart(2, '0');
      const timeElement = document.getElementById('time');
      if (timeElement) {
        timeElement.textContent = `${hours}:${minutes}:${seconds}`;
      }

      // 更新日期
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0');
      const day = now.getDate().toString().padStart(2, '0');
      const yearElement = document.getElementById('year');
      if (yearElement) {
        yearElement.textContent = `${year}-${month}-${day}`;
      }
    }

    resizeScreen();

    // 监听窗口大小变化，防抖处理
    const debouncedResize = debounce(resizeScreen, 100);
    window.addEventListener('resize', debouncedResize);

    // 初始化时间显示
    updateWeek();
    updateDateTime();

    // 每秒更新时间
    const timeInterval = setInterval(() => {
      updateWeek();
      updateDateTime();
    }, 1000);

    // 清理函数
    return () => {
      window.removeEventListener('resize', debouncedResize);
      clearInterval(timeInterval);
    };
  }, []);

  const handleTimePeriodChange = (periodData) => {
    setTimePeriod(periodData);
    // 这里可以添加其他需要响应时间变化的逻辑
    console.log('时间范围已更改:', periodData);
  };

  // Show 函数实现
  const Show = (element, className, scale, position) => {
    // 这里可以实现原来的 Show 函数逻辑
    console.log('Show function called:', element, className, scale, position);
  };

  return (
    <div className="content">
      {/* 全局时间筛选器 */}
      <GlobalTimeFilter onTimePeriodChange={handleTimePeriodChange} />

      {/* 底层背景动画-开始 */}
      <div id="animations">
        <div className="animation animation1">
          <div className="animate1"></div>
          <div className="animate2"></div>
          <div className="animate3"></div>
        </div>
        <div className="animation animation2">
          <div className="animate1"></div>
          <div className="animate2"></div>
          <div className="animate3"></div>
        </div>
        <div className="animation animation3 fanzhuan">
          <div className="animate1"></div>
          <div className="animate2"></div>
          <div className="animate3"></div>
        </div>
        <div className="animation animation4">
          <div className="animate1"></div>
          <div className="animate2"></div>
          <div className="animate3"></div>
        </div>
        <div className="animation animation5 fanzhuan">
          <div className="animate1"></div>
          <div className="animate2"></div>
          <div className="animate3"></div>
        </div>
        <div className="animation animation6">
          <div className="animate1"></div>
          <div className="animate2"></div>
          <div className="animate3"></div>
        </div>
        <div className="animation animation7 fanzhuan">
          <div className="animate1"></div>
          <div className="animate2"></div>
          <div className="animate3"></div>
        </div>
        <div className="animation animation8">
          <div className="animate1"></div>
          <div className="animate2"></div>
          <div className="animate3"></div>
        </div>
        <div className="animation animation9 fanzhuan">
          <div className="animate1"></div>
          <div className="animate2"></div>
          <div className="animate3"></div>
        </div>
        <div className="animation animation10">
          <div className="animate1"></div>
          <div className="animate2"></div>
          <div className="animate3"></div>
        </div>
      </div>
      {/* 底层背景动画-结束 */}
      {/* 显示屏头部开始 */}
      <div id="head">
        {/* 时间日期 */}
        <div className="getDate">
          <span id="time">09:00:00</span>
          <span id="week">星期三</span>
          <span id="year">2018-07-28</span>
        </div>
        <h1>XXX实时数据</h1>
      </div>
      {/* 显示屏头部结束 */}
      {/* 显示屏中间-开始*/}
      <div id="body">
        <div className="bodyLeft rel">
          <div className="bodyLeftTop">
            <div className="childtitle"><h2>咨询总量统计</h2></div>
            <div className="add" onClick={(e) => Show(e.target, 'bodyLeft', 2.8, 'before')}>+</div>
            <div id="guapai" className="guapai">
              <ConsultationTotal />
            </div>
          </div>
          <div className="bodyLeftBottom rel">
            <div className="add" onClick={(e) => Show(e.target, 'bodyLeft', 2.8, 'after')}>+</div>
            <div className="bodyLeftBottomLeft">
              <div className="childtitle"><h2>满意度统计</h2></div>
              <div id="left-bottom">
                <SatisfactionStats />
              </div>
            </div>
          </div>
        </div>
        <div className="bodyMiddle rel">
          <div className="bodyMiddleChild">
            <div className="add" onClick={(e) => Show(e.target, 'bodyMiddle', 1.8, 'after')}>+</div>
            <div className="childtitle"><h2>咨询总量统计</h2></div>
            <div className="mapmain">
              <div><ul id="list"></ul></div>
              <div className="map" id="map" style={{width: '100%', height: '700px'}}>
                <ConsultationTotalMap />
              </div>
              <div className="map" id="map1"></div>
              <div className="map" id="map2"></div>
            </div>
            <div id="sun"></div>
          </div>
        </div>
        <div className="bodyRight">
          <div className="bodyRightTop rel">
            <div className="childtitle"><h2>高频词统计</h2></div>
            <div className="add" onClick={(e) => Show(e.target, 'bodyRight', 2.8, 'before')}>+</div>
            <div id="bodyRightTopBG">
              <HighFrequencyWords />
            </div>
          </div>

          <div className="bodyRightBottom rel">
            <div className="childtitle"><h2>工单状态统计</h2></div>
            <div className="add" onClick={(e) => Show(e.target, 'bodyRight', 2.8, 'after')}>+</div>
            <div id="jiagezoushi">
              <WorkOrderStatus />
            </div>
          </div>
        </div>
      </div>

      <div id="foot">
        <div className="footparent0">
          <div className="footChild">
            <div className="childtitle"><h2>热门问答</h2></div>
            <div className="add" onClick={(e) => Show(e.target, 'footparent0', 2.8, 'after')}>+</div>
            <div id="hotQA">
              <HotQA />
            </div>
          </div>
        </div>

        <div className="footparent1">
          <div className="footChild">
            <div className="childtitle"><h2>客服排行</h2></div>
            <div className="add" onClick={(e) => Show(e.target, 'footparent1', 2.8, 'after')}>+</div>
            <div id="jiage">
              <StaffRanking />
            </div>
          </div>
        </div>
        <div className="footparent2">
          <div className="footChild">
            <div className="childtitle"><h2>业务类别统计</h2></div>
            <div className="add" onClick={(e) => Show(e.target, 'footparent2', 2.8, 'after')}>+</div>
            <div id="CJpie">
              <BusinessCategoryStats />
            </div>
          </div>
        </div>
        <div className="footparent3">
          <div className="footChild">
            <div className="childtitle"><h2>事发区域统计</h2></div>
            <div className="add" onClick={(e) => Show(e.target, 'footparent3', 2.8, 'after')}>+</div>
            <div id="cjliang">
              <IncidentAreaStats />
            </div>
          </div>
        </div>
      </div>
      <div className="mask">
        <div className="maskContent"></div>
      </div>
    </div>
  );
};

export default Dashboard;
